<!DOCTYPE html>
<html>
<head>
	<title>
		font
	</title>
</head>
<body>


	<canvas id="canvas" width="800" height="500" style="border: 1px solid #ccc;">
		
	</canvas>

	<script type="text/javascript">
		
		const canvas = document.getElementById('canvas');
		canvas.width = 350;
		const ctx = canvas.getContext('2d');
		const x = canvas.width / 2;

		ctx.beginPath();
		ctx.moveTo(x, 0);
		ctx.lineTo(x, canvas.height);
		ctx.stroke();

		ctx.font = '30px serif';

		ctx.textAlign = 'left';
		ctx.fillText('left-aligned', x, 40);

		ctx.textAlign = 'center';
		ctx.fillText('center-aligned', x, 85);

		ctx.textAlign = 'right';
		ctx.fillText('right-aligned', x, 130);

	</script>

</body>
</html>